<template>
  <view>
    <view class="header" :class="{ 'show-bar': showBar }">
      <search v-if="searchIf" ref="sea" @confirm="confirmSearch" />
      <view class="title">
        <scroll-view scroll-x style="width: 100%; white-space: nowrap" :scroll-left="scrollLeft">
          <view v-for="(item, index) in tree_stack" class="inline-item" :key="index">
            <view class="inline-item" v-if="index == 0" @click="backTree(item, -1)">
              <text :class="[isActive(index) && !isre ? 'none' : 'active']">通讯录</text>
            </view>
            <view
              v-if="index == 0 && isre"
              @click="backTree(item, -2)"
              :class="[index == tree_stack.length - 1 && isre ? 'none' : 'active', 'inline-item']"
            >
              <view class="uni-inline-item">
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
                <view>搜索结果</view>
              </view>
            </view>
            <view class="inline-item" @click="backTree(item, index)" v-if="index != 0">
              <view class="uni-inline-item">
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
                <view :class="isActive(index) ? 'none inline-ite' : 'active'">
                  {{ item[props.label] }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view>
      <!-- <scroll-view scroll-y="true" class="user-scroll-wrap"> -->
      <view class="container-list dept-list" :class="{ 'show-bar': showBar }">
        <scroll-view scroll-y="true" style="height: 100%">
          <!-- <u-gap bgColor="#F5F5F5" height="8"></u-gap>
				<view class="select-all-wrap" @click="selectAllHandle">
					<image v-if="selectAllStatus" class="select-icon" src="/static/images/work/dbd/selected_yes.png"
						mode="aspectFit"></image>
					<image v-else class="select-icon" src="/static/images/work/dbd/selected_no.png" mode="aspectFit">
					</image>
					<view>全选</view>
				</view> -->
          <u-gap bgColor="#F5F5F5" height="8"></u-gap>

          <view class="common" v-for="(item, index) in tree" @click="handleClick(item, index)" :key="index">
            <label class="info-content">
              <!-- 单选 -->
              <view class="uni-inline-item">
                <view class="uni-inline-item" @click.stop="handleClick(item, -1)">
                  <image
                    v-if="radioSelect(item)"
                    class="select-icon"
                    src="/static/images/work/dbd/selected_yes.png"
                    mode="aspectFit"
                  ></image>
                  <image
                    v-else
                    class="select-icon"
                    src="/static/images/work/dbd/selected_no.png"
                    mode="aspectFit"
                  ></image>
                </view>
                <view class="dept-icon-wrap">
                  <image class="dept-icon" src="/static/images/work/dept_icon.png" mode="aspectFit"></image>
                </view>
                <view class="dept-name"> {{ item[props.label] }}</view>
              </view>
              <view class="uni-inline-item" v-if="item.children && item.children.length > 0">
                <!-- <view class="user-num">{{item.userCount}}</view> -->
                <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
              </view>
            </label>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="btn box_sizing">
      <view class="bottom-btn-wrap">
        <!-- <view class="selected-text">已选择：16人，其中有2个部门（含子部门)</view> -->
        <view class="selected-text" v-if="newCheckList.length > 0">已选择：{{ newCheckList[0][props.label] }}</view>
        <view class="selected-text" v-else>未选择</view>
        <!-- <u-icon name="arrow-up" size="12" color="#88B4C4"></u-icon> -->
        <button class="confirm-btn" type="primary" @click="backConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script src="./code.js" type="text/javascript"></script>
<style lang="scss" scoped>
@import './css/style.scss';
.dept-list {
  height: calc(100vh);
  padding-bottom: 60px;
}
</style>
